<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/coupon.css"/>


    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>

    <style>
        .ng-scope input {
            width: 232px;
            margin-left: 5px;
            opacity: 1;
        }
        #img{
            opacity: 0;
        }
        .img {
            width: 375px;
            height: 315px;
            display: inline-block;
            background-size: 100%;
        }
        .fm{
            width: 318px;
            height: 203px;
            display: inline-block;
            background-size: 100%;
        }
        .addcate,.addcdlist{
            height: 34px;
            line-height: 34px;
            border: 1px solid #4cd0ff;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
            display: inline-block;
            color:#4cd0ff;
            margin-right: 8px;
            padding:0 3px;
        }
        @media (min-width: 768px) {
            .modal-dialog {
                width: 600px;
                margin: 200px auto;
            }
        }
        .fllist{
        margin: 10px;
            display: inline-block;
            border: 1px solid #c7c7c7;
            padding: 7PX;
        }
        .glyphicon-remove-circle{
            color: #ff5656;
        }
        .ng-scope input {
            width:70%;
            margin-left: 5px;
            opacity: 1;
        }

        .addcardlist{
            padding:7px 7px;
        }
        .ant-upload-list-item-info {
            background: transparent;
            position: relative;
            width: 120px;
            height: 96px;
            margin: 0 8px 8px 0;
            border-radius: 6px;
            overflow: hidden;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

        <div class="panel mgl15 mgr15">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>
                    <li>
                        <a href="{:url('cardgifts/cardgiftracklist')}">货架管理</a>
                    </li>
                    <li class="active" style="color: #02b87f;">
                        货架基础设置
                    </li>
                </ol>
                <div>


                    <div class="panel panel-default ng-scope">
                        <form action="" method="post"  id="formcate">
                            <div class="panel-heading">
                                货架基础设置
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">顶部图片：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <img src="__STATIC_URL__/static/images/commodityImg3.png"  alt="商品图片" class="img" id="pimg">
                                                    <div class="ng-scope" style="position: relative;">
                                                        <span class="btn btn-default">上传图片</span>
                                                        <input type="file" id="img" value=""  onchange="upload('img','file','banner_pic_url')"/>
                                                        <input type="hidden" name="banner_pic_url" id="banner_pic_url"   value="" >

                                                    </div>
                                                    <div class="r-desc ng-binding ng-scope"> 图片建议尺寸：750px*630px，格式为.jpg，大小不超过2M.</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">标题：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">

                                                    <input type="text" name="page_title" id="page_title" class="form-control" maxlength="12"  placeholder="" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">是否支持买给自己：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="hidden" name="support_buy_for_self" value="0" id="support_buy_for_self">

                                                    <div class="switch" id="self" data-animated="true" data-on-label="是" data-off-label="否">

                                                        <input type="checkbox" id="se" />

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">是否支持一次购买多张及发送至群 ：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="hidden" name="support_multi" value="0" id="support_multi">
                                                    <div class="switch" id="multi" data-animated="true" data-on-label="是" data-off-label="否">

                                                        <input type="checkbox" id="mu" />
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">商家地址：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="address" class="form-control" id="address"   placeholder="" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">服务电话：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="service_phone" class="form-control" id="service_phone"  placeholder="" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">使用说明：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <textarea class="form-control" name="biz_description" id="biz_description" placeholder="用于描述退款、发票等流程" maxlength="170"  style=" width: 370px;"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">自定义标题1：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="cell_1[title]" class="form-control" id="celltitle_1"  placeholder="商家自定义链接标题，用于承载退款、发票等流程" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">自定义链接1：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="cell_1[url]" class="form-control" id="cellurl_1"  placeholder="商家自定义链接，用于承载退款、发票等流程" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">自定义标题2：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="cell_2[title]" class="form-control" id="celltitle_2"  placeholder="商家自定义链接标题，用于承载退款、发票等流程" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">自定义链接2：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="cell_2[url]" class="form-control" id="cellurl_2"  placeholder="商家自定义链接，用于承载退款、发票等流程" value="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="panel-footer" style="text-align: center;">
                                <button class="btn btn-success" type="button" onclick="btn();" style="padding:8px 30px;">保存</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>

<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
$(function(){
    $.ajax({
        url:"{:url('cardgifts/getcardrack')}",
        data:"",
        type:"post",
        success:function(data){
        // console.log(data);
        if(data.code==0){
            var datas=data.data;

            $("#pimg").attr("src",datas.banner_pic_url);
            $("#banner_pic_url").val(datas.banner_pic_url);
            $("#page_title").val(datas.page_title);
            $("#support_buy_for_self").val(datas.support_buy_for_self);

            if(datas.support_buy_for_self=="1"){
                // console.log( $("#se").prop("checked"));

                $('#self').bootstrapSwitch('setState', true);

            }
            $("#support_multi").val(datas.support_multi);
            if(datas.support_multi=="1"){
                $('#multi').bootstrapSwitch('setState', true);

            }
            $("#address").val(datas.address);
            $("#service_phone").val(datas.service_phone);
            $("#biz_description").val(datas.biz_description);
        // console.log(datas.cell_1.title)
           $("#celltitle_1").val(datas.cell_1.title);
            $("#celltitle_2").val(datas.cell_1.url);
           $("#cellurl_1").val(datas.cell_2.title);
            $("#cellurl_2").val(datas.cell_2.url);

        }
    }
    })
})
</script>


<script>


</script>
<script>
    function upload(file, typed,inputid) {
        var formData = new FormData();
        formData.append('file', $('#' + file)[0].files[0]);
        formData.append('other', file);
        var _name = $('#' + file)[0].value;
        var _fileName = _name.slice(_name.lastIndexOf(".")+1).toLowerCase();


        if (_fileName !== "png" && _fileName !== "jpg"&& _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
            $('#' + file).val('')

            $(".commodityImg").attr("src",'');
//            右侧预览图片
            $("."+ file).attr("src",'');
//            相应隐藏input传值
            $("#"+inputid).val('');

            return false;
        }
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            // console.log(res);
            if(res.code=="0"){
                //            左侧预览图背景
                $(".commodityImg").attr("src", res.pic);
//            右侧预览图片
                $("."+ file).attr("src", res.pic);
//            相应隐藏input传值
                $("#"+inputid).val(res.pic);
            }else{
                layer.layer.msg(res.message);
            }

            // $("." + file).attr("src", res.savapath).css("display", "block");
            // $(".file-" + file).val(res.other);
            // $("." + typed + "-" + file).val(res.other);
        }).fail(function (res) {
            layer.msg("上传失败")
        });
    };
</script>
<script>
    $("#multi").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_multi").val("1");
        }else{
            $("#support_multi").val("0");
        }
    });
    $("#self").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_buy_for_self").val("1");
        }else{
            $("#support_buy_for_self").val("0");
        }
    });
</script>
<script>
    function btn(){
        var banner_pic_url=$("#banner_pic_url").val();

        var page_title = $('#page_title').val();

        var address=$("#address").val();
        var service_phone=$("#service_phone").val();
        var biz_description=$("#biz_description").val();
        var celltitle_1=$("#celltitle_1").val();
        var celltitle_2=$("#celltitle_2").val();
        var cellurl_1=$("#cellurl_1").val();
        var cellurl_2=$("#cellurl_2").val();
        if(banner_pic_url==""){
            layer.msg('请上传顶部图片！');
            return false;
        }

        if(page_title==""){
            layer.msg('请填写标题！');
            return false;
        }
        if(address==""){
            layer.msg('请填写商家地址。');
            return false;
        }

        if(service_phone==""){
            layer.msg('请填写服务电话。');
            return false;
        }
        if(biz_description==""){
            layer.msg('请填写使用说明。');
            return false;
        }
        if(celltitle_1==""){
            layer.msg('请填写自定义标题1。');
            return false;
        }
        if(cellurl_1==""){
            layer.msg('请填写自定义链接1。');
            return false;
        }
        if(celltitle_2==""){
            layer.msg('请填写自定义标题2。');
            return false;
        }
        if(cellurl_2==""){
            layer.msg('请填写自定义链接2。');
            return false;
        }
        $.ajax({
            url: "{:url('cardgifts/creatcardrack')}",
            type: "post",
            data: $("#formcate").serialize(),
            success: function (data) {
                // console.log(data);
                if(data.code==0){
                    layer.msg(data.message);
                    setTimeout(function(){
                        window.location.href = "{:url('cardgifts/cardgiftrackcate')}";

                    },1500)
                }else{
                    layer.msg(data.message);
                }
            }
        })
    }
</script>
</body>

</html>
